<template>
  <div class="container">
    <cq-bannner></cq-bannner>
    <div class="brand w-1160 flex flex-column flex-center">
      <img
        src="@/assets/img/container-title-brand.png"
        width="391"
        height="86"
        alt="!"
      />
      <ul class="brand-wrap-item psr w-1160 flex flex-between">
        <li v-for="item in home" :key="item.id">
          <img :src="item.src" alt="!" width="311" height="454" />
          <div>
            <img :src="item.src2" width="90" height="90" alt="!" />
            <p>{{ item.cont }}</p>
            <p>{{ item.cont2 }}</p>
            <a class="ban-btn btn-white" href="#">{{ item.cont3 }}</a>
          </div>
          <div>
            <img :src="item.src3" width="311" height="454" alt="!" />
          </div>
        </li>
      </ul>
    </div>
    <div class="tech">
      <div class="tech-warp w-1160 flex flex-column flex-center psr">
        <img
          src="@/assets/img/tech-warp-title.png"
          width="302"
          height="79"
          alt="!"
        />
        <ul class="w-1160 flex flex-between text-center">
          <li :key="item.id" v-for="item in home2">
            <a href="#">{{ item.cont }} </a>
          </li>
        </ul>
        <div class="carousel w-1060 flex flex-between psr">
          <div
            class="car-list car-list-left"
            v-for="item in home3"
            :key="item.id"
          >
            <img :src="item.src" width="218" height="55" alt="CHU" />
            <p class="fz14 textind-2em c-666">
              {{ item.cont }}
            </p>
          </div>
        </div>
        <a href="#" class="car-button car-left-button psa"></a>
        <a href="#" class="car-button car-right-button psa"></a>
      </div>
    </div>
    <div
      class="cont-footer c-fff flex flex-column flex-center"
      :key="item.id"
      v-for="item in home4"
    >
      <p>{{ item.cont }}</p>
      <div class="w-614 flex flex-between ma-b-30">
        <p>{{ item.cont2 }}</p>
        <p>{{ item.cont3 }}</p>
        <p>{{ item.cont4 }}</p>
      </div>
      <btn-more :className="['btn-white']">{{ item.cont5 }}</btn-more>
    </div>
  </div>
  <!-- <div class="cont-footer c-fff flex flex-column flex-center">
      <p>依托橙券，聚焦权益，全面合作</p>
      <div class="w-614 flex flex-between ma-b-30">
        <p>全国服务热线：400-096-0828</p>
        <p>|</p>
        <p>商务合作专线：156-6806-1789</p>
      </div>
      <a class="ban-btn btn-bor-color" href="#">了解更多 </a>
     </div>
  </div> -->
</template>
<script>
import CqBannner from './components/cq-bannner'
import BtnMore from './components/btn-more'
export default {
  name: 'home-page',
  components: {
    CqBannner,
    BtnMore
  },
  data() {
    return {
      home: [
        {
          src: require('@/assets/img/marketing.jpg'),
          src2: require('@/assets/img/cyx.png'),
          src3: require('@/assets/img/marketing.jpg'),
          cont: '橙营销',
          cont2: '营销助力品牌升级',
          cont3: '了解更多'
        },
        {
          src: require('@/assets/img/integral.jpg'),
          src2: require('@/assets/img/cyx.png'),
          src3: require('@/assets/img/integral.jpg'),
          cont: '橙营销',
          cont2: '营销助力品牌升级',
          cont3: '了解更多'
        },
        {
          src: require('@/assets/img/financial.jpg'),
          src2: require('@/assets/img/cyx.png'),
          src3: require('@/assets/img/financial.jpg'),
          cont: '橙营销',
          cont2: '营销助力品牌升级',
          cont3: '了解更多'
        },
        {
          src: require('@/assets/img/welfare.png'),
          src2: require('@/assets/img/cyx.png'),
          src3: require('@/assets/img/welfare.png'),
          cont: '橙营销',
          cont2: '营销助力品牌升级',
          cont3: '了解更多'
        }
      ],
      home2: [
        {
          cont: '金融行业'
        },
        {
          cont: '金融行业'
        },
        {
          cont: '金融行业'
        },
        {
          cont: '金融行业'
        },
        {
          cont: '金融行业'
        },
        {
          cont: '金融行业'
        }
      ],
      home3: [
        {
          src: require('@/assets/img/CHU.png'),
          cont: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。'
        },
        {
          src: require('@/assets/img/CUP.png'),
          cont: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。'
        },
        {
          src: require('@/assets/img/Tencent.png'),
          cont: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。'
        }
      ],
      home4: [
        {
          cont: '依托橙券，聚焦权益，全面合作',
          cont2: '全国服务热线：400-096-0828',
          cont3: '|',
          cont4: '商务合作专线：156-6806-1789',
          cont5: '了解更多'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.brand-wrap-item li > img {
  width: 280px;
  height: 400px;
  transition: 0.3s linear;
}

.container {
  padding-top: 240px;
}
.brand-wrap-item li > img {
  width: 280px;
  height: 400px;
  transition: 0.3s linear;
}
/* ===== brand-wrap-item li first div  satrt ===== */
.brand-wrap-item li div:first-of-type {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.brand-wrap-item li div:first-of-type img {
  margin-top: 108px;
}
.brand-wrap-item li div:first-of-type p:first-of-type {
  margin-top: 38px;
  line-height: 28px;
  font-size: 28px;
  color: #fff;
}
.brand-wrap-item li div:first-of-type p:last-of-type {
  margin: 14px 0 25px 0;
  line-height: 16px;
  font-size: 16px;
  color: #dadada;
}
/* =====  mask-background  satrt===== */
.brand-wrap-item li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  transition: transform 0.3s linear;
}
.brand-wrap-item li div:last-of-type img {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 400px;
  filter: blur(0.5px) opacity(0.75);
  z-index: -1;
  transition: transform 0.3s linear;
}
/* =====  mask-button satrt===== */
.brand-wrap-item li div:first-of-type a {
  visibility: hidden;
}
/* ======= brand-wrap-item height satrt ======  */
.brand-wrap-item {
  margin-top: 65px;
  padding-bottom: 47%;
}
/* ======= brand-wrap-item li satrt ======= */
.brand-wrap-item li {
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  z-index: 1;
  transition: box-shadow 0.3s linear;
}
.brand-wrap-item li:nth-of-type(2) {
  left: 292px;
}
.brand-wrap-item li:nth-of-type(3) {
  left: 584px;
}
.brand-wrap-item li:nth-of-type(4) {
  left: 876px;
}
/* ======= brand-wrap-item li hover satrt  ======= */
.brand-wrap-item li:hover:before {
  background-color: transparent;
}
.brand-wrap-item li:hover {
  z-index: 9999;
  box-shadow: 0 26px 18px #a8a8a8;
}
.brand-wrap-item li:hover > img {
  transform: scale(1.08);
  border: 1px solid #fff;
}
.brand-wrap-item li:hover div:last-of-type img {
  transform: scale(1.14);
  visibility: visible;
}
.brand-wrap-item li:hover a.ban-btn {
  visibility: visible;
}
/* =======  tech  start ===== */
.tech {
  height: 912px;
  background: #fff url(@/assets/img/tech-bg.png) no-repeat center/cover;
}
.tech-warp {
  padding-top: 80px;
}
.tech-warp ul {
  margin: 68px 0 96px 0;
}
.tech-warp ul a {
  display: block;
  box-sizing: border-box;
  width: 181px;
  line-height: 50px;
  background-color: #fff;
  box-shadow: 0px -1px 21px 0px #c0c0c059;
  border-radius: 25px;
  color: #333;
  font-size: 18px;
}
.tech-warp ul a:hover {
  color: #fff;
  background-color: #ff7200;
}
/* ======  carousel   car-list start =====*/
.car-list {
  padding: 84px 0;
  width: 500px;
  background-color: rgba(255, 255, 255, 0.8);
}
.car-list img {
  transform: scale(0.78, 0.68);
}
.car-list p {
  margin: auto;
  margin-top: 48px;
  width: 424px;
  text-align: left;
  line-height: 30px;
}
.car-list-left img {
  margin-left: 58px;
}
.car-list-right img {
  margin-left: 226px;
}
/*===== car-list-show start ===== */
.car-list-show {
  padding: 84px 0 122px;
  box-shadow: 0 0 8px #ccc;
  top: -30px;
  left: 280px;
  text-align: center;
  background-color: #fff;
  z-index: 1;
}
.car-list-show img {
  transform: scale(1, 1);
}
.car-list-show p {
  margin-top: 60px;
}
/*===== car-left  button start ===== */
.car-button {
  width: 53px;
  height: 53px;
  top: 542px;
  background-size: 53px 53px;
}
.car-left-button {
  right: 1127px;
  background-image: url(@/assets/img/btn-left.png);
}
.car-right-button {
  left: 1127px;
  background-image: url(@/assets/img/btn-right.png);
}
.car-left-button:hover {
  background-image: url(@/assets/img/btn-left-1.png);
}
.car-right-button:hover {
  background-image: url(@/assets/img/btn-right-1.png);
}
.carousel :nth-of-type(2) {
  position: absolute;
  // padding-left: 250px;
  padding: 95px 0 122px;
  box-shadow: 0 0 8px #ccc;
  top: -30px;
  left: 280px;
  text-align: center;
  background-color: #fff;
  z-index: 1;
  transform: scale(1, 1);
}

.carousel div:nth-of-type(2) > img {
  transform: scale(1, 1);
  margin: 0;
}

.carousel div:nth-of-type(3) > img {
  margin-left: 240px;
}
/* ====== cont-footer satrt ====== */
.cont-footer {
  font-weight: 100;
  height: 330px;
  background: #0d1833 url(@/assets/img/footer-top-bg.png) no-repeat center/cover;
}
.cont-footer > p {
  line-height: 96px;
  font-size: 48px;
}
.cont-footer div p {
  font-size: 20px;
}
.brand {
  padding-top: 240px;
}
</style>
